<template>
    <ForOneHeader :enableBack="true" />
    <view class="walls-page">


        <!--one banner -->

        <view class="banner">
            <u-swiper height="600rpx" indicator keyName="image" circular class="index-swiper"
                :list="banner_url"></u-swiper>
        </view>


        <!-- four wall categories lays here in column direction -->
        <MidLayout>

            <view class="title">
                <view class="zh">五金分类</view>
                <view class="en">Hardware</view>
            </view>


            <view class="category-container button-container">

                <BounceButton v-for="(item, index) in buttons" :key="index" @mytap="handleTap(item.id)"
                    height="220rpx" :image="item.bg_url" />

                    <!-- <view style="aspect-ratio: 3/1;position: relative;" v-for="(item, index) in buttons" :key="index" >
                        <image style="width: 100%;height: 100%;" mode="scaleToFill" :src="item.bg_url" @tap="handleTap(item.id)"></image>
                    </view> -->
<!-- WXML -->
                <!-- <view class="parent-container" v-for="(item, index) in buttons" :key="index">
                    <image :src="item.bg_url"  mode="scaleToFill" class="fill-image" @tap="handleTap(item.id)" />
                </view> -->
                    

                <u-gap></u-gap>
            </view>
        </MidLayout>


    </view>



</template>

<script setup lang="ts">
import { ref, defineProps } from 'vue'

import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'

import { shareUtils } from '@/utils/share'
import {getData} from '@/api/hardware'
import useShare from '@/mixins/share'

const {getShareCover} = useShare()
const banner_url = ref('')
const buttons = ref([])
const show = ref(false)
const index = ref(-1)
const pop_up_title = ref('')





getData().then(res=>{
   
    
    banner_url.value  = res.banner_url
    buttons.value = res.data

    return true
})


const handleTap = (_id) => {
   
    uni.navigateTo({
        url:`/pages/hardware/detail?level_one_category_id=${_id}`
    })
}



const page = getCurrentPages().pop()

let path: string = page.route
onShareTimeline(() => {

    const share_path = path
    const promise = new Promise(resolve => {
        getShareCover(path,pop_up_title.value,null).then(res => {
            // debugger
            res.path = shareUtils.buildPathQuery(share_path)
            resolve(res)
        })

    })
    return {
        title: show.value ? pop_up_title.value:null,
        imageUrl: null,
        path: shareUtils.buildPathQuery(path),
        promise
    }
})
onShareAppMessage(() => {
    const share_path = path
    const promise = new Promise(resolve => {
        getShareCover(path,pop_up_title.value,null).then(res => {
            // debugger
            res.path = shareUtils.buildPathQuery(share_path)
            resolve(res)
        })

    })
    return {
        title: show.value ? pop_up_title.value:null,
        imageUrl: null,
        path: shareUtils.buildPathQuery(path),
        promise
    }
})





</script>

<style scoped>
.share-btn::after {
    border: 0rpx solid #fff;
}

.share-btn {
    padding: 0rpx;
}

/* 按钮容器样式 */
.button-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10rpx;
    /* 按钮之间的间距 */
}

/* 按钮通用样式 */
.menu {
    display: flex;
    flex-direction: row;

}

.gap {
    width: 30rpx;
}

.tools {
    display: flex;
    flex-direction: row;
    padding: 20rpx 0;
    justify-content: space-between;
    width: 100vw;
}


</style>